<template>
    <main-layout>
        首页
    </main-layout>
</template>

<script>
    export default {
        // 自定义指令
        directives:{

        },
        // 自定义过滤器
        filters:{

        },
        data() {
            return {
                // 并发获取数据d
                bannerList: [],
                typesList: [],
                recommendList: [],
                // 底部数据
                footerList: [
                    {icon: '', text: '首页', active: true, path: '/home'},
                    {icon: '', text: '分类', active: false, path: '/type'},
                    {icon: '', text: '看视频', active: false, path: '/video'},
                    {icon: '', text: '购物车', active: false, path: '/cart'},
                    {icon: '', text: '我的', active: false, path: '/me'}
                ]
            }
        },
        created(){
            // 可以使用Promise.all实现并发
            Promise.all([
                bannerApi(),
                typesApi(),
                recommendApi()
            ]).then(data =>{
                // console.log(data);
                // 获取轮播图数据，将数据遍历出来
                if(data[0].code == 200){
                    this.bannerList = data[0].data.rows.map(it =>{
                        it.image = 'http://www.shuiyue.info:12600' + it.path
                        return it
                    })
                }
                // 获取商品类型接口数据
                if (data[1].code === 200) {
                    // 数组要做成二维数组，然后每一个类型对象应该为：{icon: 'icon-1', text: '新鲜水果'}
                    let _newArr = data[1].data.reduce((_r, _it, _i) => {
                        _r.push({icon: `icon-${_i + 1}`, text: _it})
                        return _r
                    }, [])
                    let temp = []
                    for (let i = 0;i < _newArr.length;i += 10) {
                        // 可以取数组的数据：splice-会改变之前的数据、slice
                        let _nowArr = _newArr.slice(i, i + 10)
                        temp.push(_nowArr)
                    }
                    this.typesList = temp
                }
                // 获取推荐商品信息
                if (data[2].code === 200) {
                    // 给每一个产品添加一个img属性，来指定产品的图片数据
                    this.recommendList = data[2].data.rows.map(it => {
                        // 对产品遍历
                        it.product = it.product.map(p => {
                            p.img = 'http://www.shuiyue.info:12600' + p.banner[0].path
                            return p
                        })
                        return it
                    })
                }
            }).catch(error =>{
                console.log(error);
            })
        },
        methods:{
            // 添加数据到购物车
            async addCart(p) {
                let result = await cartAddApi({product: {...p, count: 1}})
            }
        }
    }
</script>
<style lang="less" scoped>
    // 引入公共样式文件
    @import "../../style/common.less";
    .banner-img {
        display: block;
        height: 210px;
        max-width: 100%;
        margin: auto;
    }

        // 定义一个方法，然后这个方法实现一个遍历
    // 定义数据长度
    @len: 13;

    // 定义一个递归方法实现遍历
    // 方法可以有默认值
    // 因为是递归，所以应该有条件，否则就是一个死循环
    .loop(@index: 1) when (@index <= @len) {
        // 在名字中或字符串中使用变量的时候，需要使用一个语法@{}
        &.icon-@{index} {
            // 在路径中使用变量的时候，一定要加上""
            background-image: url("../../images/types/icon-@{index}.png");
        }
        .loop(@index + 1);
    }

    .types-list {
        display: block;
        > .item {
            // 清除浮动 -- overflow: hidden; 在内容最后放一个元素(伪元素 after)，然后这个元素的样式添加一个clear: both;
            float: left;
            width: 20%;
            > .icons {
                display: block;
                width: 64px;
                height: 64px;
                background-repeat: no-repeat;
                background-size: 48px;
                background-position: center;
                .loop();
                // &.icon-1 {
                //     background-image: url(../../images/types/icon-1.png);
                // }
                // &.icon-2 {
                //     background-image: url(../../images/types/icon-2.png);
                // }
            }
            > .text {
                display: block;
                font-size: .8rem;
                color: #1e1e1e;
                text-align: center;
                line-height: 36px;
            }
        }

        // 调用一个方法来实现浮动清除
        .clear();
    }


    // 页面产品样式
    .recommend-list {
        > .title {
            display: block;
            font-size: 1.1rem;
            color: #323232;
            text-align: center;
            line-height: 48px;
        }
        > .product-box {
            background: #fff;
            display: block;
            padding: 8px;
            margin: 0 16px 14px;
            border-radius: 6px;
            > .title {
                display: block;
                font-size: .8rem;
                line-height: 30px;
                text-align: center;
                color: #555555;
            }
            > img {
                display: block;
                width: 100%;
            }
            > .name {
                font-size: .7rem;
                color: #323232;
                line-height: 20px;
                border-bottom: solid 1px #eaeaec;
            }
            > .time {
                font-size: .6rem;
                color: #999999;
            }
            > .price {
                font-size: 1.2rem;
                // font-weight: 600;
                color: #e70012;
                > em {
                    font-size: .8rem;
                    font-weight: 400;
                    font-style: normal;
                }
            }
        }
    }


</style>